@use 'config' as *;
@use 'function' as *;
/* 第三方图标字体间距/大小设置
------------------------------- */

@mixin generalIcon {
  font-size: 14px !important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  text-align: center;
  justify-content: center;
}

/* 文本不换行
------------------------------- */
@mixin text-no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 多行文本溢出
  ------------------------------- */
@mixin text-ellipsis($line: 2) {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

/* 滚动条(页面未使用) div 中使用：
  ------------------------------- */

@mixin scrollBar {
  // 滚动条凹槽的颜色，还可以设置边框属性
  &::-webkit-scrollbar-track-piece {
    background-color: #f8f8f8;
  }
  // 滚动条的宽度
  &::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  // 滚动条的设置
  &::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    background-clip: padding-box;
    min-height: 28px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
  }
}

/* title前圆点样式：
  ------------------------------- */
@mixin title-before-dot($left: 0) {
  position: relative;
  &::before {
    content: '';
    background-color: getCssVar('color-primary');
    width: 10px;
    height: 20px;
    position: absolute;
    left: $left;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 10px 10px 0;
  }
}

// 页面标题样式
@mixin page-title {
  font-size: #{getCssVar('next-page-title-size')};
  font-weight: #{getCssVar(font-weight, medium)};
}

// 添加元素分割线
@mixin split-line(
  $position: 'left',
  $range: 20px,
  $width: 1px,
  $height: 60%,
  $color: #{getCssVar(border-color)}
) {
  @if ($position == 'left') {
    padding-left: calc($range + $width);
  } @else {
    padding-right: calc($range + $width);
  }
  $flag: 'after';
  @if ($position == 'left') {
    $flag: 'before';
  }
  position: relative;
  &::#{$flag} {
    content: '';
    display: inline-block;
    position: absolute;
    height: $height;
    width: $width;
    top: 50%;
    transform: translateY(-50%);
    background-color: $color;
    @if ($position == 'left') {
      left: 0;
    } @else {
      right: 0;
    }
    @content;
  }
}

// 元素右侧添加分割线
@mixin split-line-to-right(
  $range: 20px,
  $width: 1px,
  $height: 60%,
  $color: #{getCssVar(border-color)}
) {
  @include split-line(
    $position: 'right',
    $range: $range,
    $width: $width,
    $height: $height,
    $color: $color
  ) {
    @content;
  }
}
// 元素左侧添加分割线
@mixin split-line-to-left(
  $range: 20px,
  $width: 1px,
  $height: 60%,
  $color: #{getCssVar(border-color)}
) {
  @include split-line(
    $position: 'left',
    $range: $range,
    $width: $width,
    $height: $height,
    $color: $color
  ) {
    @content;
  }
}
